/* 1. 글로벌 & 변수 설정
--------------------------------------*/
:root {
    --color-primary: #A1887F;
    --color-primary-dark: #795548;
    --color-hero-bg: #ffe897;   
    --color-kakao: #FEE500;
    
    --color-dark: #222222;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-white: #FFFFFF;
    --color-gray-bg: #F8F8F8; 
    --color-border: #EEEEEE;
    --color-purple: #9333EA;
    --color-purple-dark: #7d2bcb;
    --color-naver: #03C75A;

    --font-family-main: 'Noto Sans KR', sans-serif;
    --header-height: 70px;
    --border-radius: 8px;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* 2. 글로벌 리셋 & 헬퍼
--------------------------------------*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-main);
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-white);
    padding-bottom: 70px; 
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 60px 0;
}

.section__title {
    font-size: 2.0rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}

.section__title--center {
    text-align: center;
    font-size: 2.0rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.section__subtitle {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 30px;
}

.section__subtitle--center {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 40px;
}

/* 3. 공용 버튼
--------------------------------------*/
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background-color: var(--color-purple);
    color: var(--color-white);
}
.btn-primary:hover {
    background-color: var(--color-purple-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.btn-kakao {
    background-color: var(--color-kakao);
    color: #3C1E1E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
}
.btn-kakao:hover {
    filter: brightness(0.95);
}
.btn-kakao__icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;
}


/* 4. 헤더 (Header)
--------------------------------------*/
.header {
    width: 100%;
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-light);
}

.header__container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo img {
    height: 55px;
    width: auto;
}

/* 5. 모바일 네비게이션
--------------------------------------*/
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.mobile-nav.is-active {
    transform: translateX(0);
}

body.mobile-nav-active {
    overflow: hidden;
}

.mobile-nav__header {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.mobile-nav__logo img {
    height: 55px;
}

.mobile-nav__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-dark);
    padding: 5px;
}

.mobile-nav__menu {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-nav__menu li a {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    padding: 10px 0;
}


/* 6. 히어로 (Hero)
--------------------------------------*/
.hero {
    position: relative;
    display: flex;
    align-items: stretch;
    padding-top: calc(var(--header-height) + 40px); 
    padding-bottom: 60px;
    min-height: 90vh; 
    background-color: var(--color-hero-bg); 
    overflow: hidden;
}

.hero__wrapper {
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: center;
    gap: 40px;
}

.hero__content {
    color: var(--color-text);
    max-width: 600px; 
}

.hero__subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-primary-dark); 
}

.hero__title {
    font-size: 1.9rem;
    font-weight: 900;
    margin: 10px 0 30px;
    line-height: 1.4;
    color: var(--color-dark);
    word-break: keep-all;
}

.hero__btn {
    padding: 14px 40px;
    font-size: 1.1rem;
}

.hero__legal {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: 30px;
    line-height: 1.5;
}

.hero-swiper {
    width: 100%;
    max-width: 400px;
}

.hero-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 450px;
}

.hero-swiper .swiper-slide img {
    width: auto;
    height: auto;
    max-height: 450px;
    object-fit: contain;
}

.hero__overlay {
    display: none;
}

/* 7. 소개 (Introduce)
--------------------------------------*/
.introduce {
    background-color: var(--color-white);
}

.introduce__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.introduce__image {
    width: 100%;
    min-height: 300px;
    background-image: url('images/logo.png'); 
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

/* 8. 서비스 (Services)
--------------------------------------*/
.services {
    background-color: var(--color-gray-bg);
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.service-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.service-card__image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.service-card__content {
    padding: 25px;
}

.service-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 5px;
}

.service-card__desc {
    font-size: 0.9rem;
    color: var(--color-text-light);
}


/* 10. 강점 
--------------------------------------*/
.strength__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.strength__image {
    width: 100%;
    min-height: 300px;
    background-image: url('images/model1.png'); 
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

.strength__text p {
    font-size: 0.95rem;
}

/* 11. 모델 (Model Swiper)
--------------------------------------*/
.model {
    background-color: var(--color-gray-bg);
}

.model-swiper {
    padding-bottom: 50px;
}

.model-swiper .swiper-slide {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    aspect-ratio: 4 / 5;
}

.model-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-swiper .swiper-pagination {
    bottom: 0;
}

.model-swiper .swiper-pagination-bullet-active {
    background-color: var(--color-primary-dark);
}

/* 12. 푸터 (Footer)
--------------------------------------*/
.footer {
    background-color: var(--color-hero-bg); 
    color: var(--color-text-light);      
    padding: 60px 0;
    font-size: 0.85rem;
}

.footer h3 {
    color: var(--color-dark);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.footer a {
    color: var(--color-text-light); 
}

.footer a:hover {
    color: var(--color-primary-dark);
}

.footer__top {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

/* (퍼플 버튼 스타일은 그대로 유지) */
.footer__extra-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.footer__extra-links a {
    background-color: var(--color-purple);
    color: var(--color-white);
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 8px 14px;
    border-radius: var(--border-radius);
    text-align: center;
}
.footer__extra-links a:hover {
    background-color: var(--color-purple-dark);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.footer__middle {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer__info p {
    line-height: 1.7;
    margin-bottom: 15px;
}

.footer__info span {
    color: var(--color-text-light); 
    font-size: 0.8rem;
}

.footer__banner img {
    max-width: 270px;
}

.footer__bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 30px;
    color: var(--color-text-light);
}

.footer__bottom p {
    margin-bottom: 5px;
    font-size: 0.8rem;
}

/* 13. 하단 고정 버튼
--------------------------------------*/
.fixed-bottom-btns {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 900;
}

.fixed-bottom-btns .btn {
    flex: 1;
    border-radius: 0;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 700;
}

.btn-join {
    background-color: var(--color-text);
    color: var(--color-white);
}
.btn-join:hover {
    background-color: #000;
}

.btn-designer {
    background-color: var(--color-primary); 
    color: var(--color-white);
}
.btn-designer:hover {
    background-color: var(--color-primary-dark);
}

br.pc-only {
    display: none;
}


/* 14. 반응형 (PC)
--------------------------------------*/
@media (min-width: 992px) {
    /* PC (992px 이상) */

    .section {
        padding: 100px 0;
    }

    .section__title,
    .section__title--center {
        font-size: 2.5rem;
    }

    .hero {
        min-height: 650px;
        height: calc(100vh - var(--header-height));
        max-height: 800px; 
        padding-top: var(--header-height);
        padding-bottom: 0;
    }

    .hero__wrapper {
        flex-direction: row; 
        justify-content: space-between;
        text-align: left; 
        gap: 60px;
        align-items: flex-end;
        height: 100%;
    }
    
    .hero__content {
        flex: 1;
        max-width: 550px;
        align-self: center;
    }

    .hero-swiper {
        flex: 0 0 45%; 
        max-width: 500px;
        margin-right: -50px; 
    }

    .hero-swiper .swiper-slide {
        height: 600px; 
    }

    .hero-swiper .swiper-slide img {
        max-height: 600px; 
    }

    .hero__title {
        font-size: 2.4rem;
        word-break: normal; 
    }
    .hero__subtitle {
        font-size: 1.5rem;
    }
    .hero__legal {
        font-size: 0.9rem;
    }

    br.pc-only {
        display: block;
    }

    /* 소개 */
    .introduce__container {
        flex-direction: row; 
        align-items: center;
        gap: 60px;
    }
    .introduce__text, .introduce__image {
        flex: 1;
    }
    .introduce__image {
        min-height: 500px;
    }

    /* 서비스 */
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    .service-card__content {
        padding: 30px;
    }

    /* 강점 */
    .strength__container {
        flex-direction: row; 
        align-items: center;
        gap: 60px;
    }
    .strength__image {
        flex: 1;
        min-height: 500px;
        order: -1; 
    }
    .strength__text {
        flex: 1;
    }
    .strength__text p {
        font-size: 1rem;
    }
    
    /* 푸터 */
    .footer {
        font-size: 0.9rem;
    }
    .footer__top {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
    }
    .footer__middle {
        flex-direction: row; 
        justify-content: space-between;
        align-items: flex-start;
    }
    .footer__info {
        flex: 2;
    }
    .footer__banner {
        flex: 1;
        text-align: right;
    }
    .footer__bottom {
        text-align: center;
    }
}

/*
 * 15. 로그인 페이지 (customer.html)
--------------------------------------*/
.login-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - 70px); 
    padding: 100px 0;
    background-color: var(--color-gray-bg);
}

.login-box {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    text-align: center;
    max-width: 450px;
    width: 100%;
    margin: 0 20px; 
}

.login-box h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.login-box__subtitle {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 30px;
    line-height: 1.5;
}

.login-box__buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login-box .btn-kakao,
.login-box .btn-join,
.login-box .btn-primary {
    width: 100%; 
    font-size: 1.05rem;
    padding: 14px;
}

.login-box .btn-kakao__icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

@media (min-width: 992px) {
    .login-box {
        padding: 50px;
    }
}

/*
 * 16. 디자이너 로그인 페이지 (designer.html)
--------------------------------------*/
.login-box__subheading {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.login-box__subheading .material-icons {
    font-size: 1.2rem;
    transform: rotate(-90deg);
}

/* * 17. 플로팅 SNS 버튼
--------------------------------------*/
.floating-sns {
    position: fixed;
    bottom: 90px; 
    right: 20px;
    z-index: 950;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sns-link {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: var(--shadow-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    padding: 12px; 
}
.sns-link:hover {
    transform: scale(1.1);
}

.sns-link svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sns-link.sns-kakao {
    background-color: var(--color-kakao);
    color: #3C1E1E;
}
.sns-link.sns-naver {
    background-color: var(--color-naver);
    color: var(--color-white);
}

/*
 * 18. 입점 신청 폼 (shop_register.html)
--------------------------------------*/

.register-section {
    padding: 100px 0;
    background-color: var(--color-gray-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
}

.register-form {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    max-width: 700px;
    width: 100%;
    margin: 0 20px;
}

.register-form h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 25px;
    display: flex; 
    align-items: flex-start; 
    gap: 20px;
}

.form-group label {
    display: block;
    font-size: 1rem;
    font-weight: 700; 
    color: var(--color-dark);
    margin-bottom: 0; 
    flex: 0 0 130px;
    padding-top: 12px; 
}

.form-group > input[type="text"],
.form-group > input[type="date"],
.form-group > input[type="tel"],
.form-group > .file-group,
.form-group > .form-input-group {
    flex: 1;
    min-width: 0;
}

.form-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}


/* 폼 입력 공통 스타일 */
.register-form input[type="text"],
.register-form input[type="date"],
.register-form input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color 0.3s ease;
}

.register-form input:focus {
    outline: none;
    border-color: var(--color-purple);
}

.register-form input::placeholder {
    color: #AAAAAA;
}

.register-form input[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 6px;
}

/* 파일 첨부 그룹 */
.file-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 2px; 
}

.file-group .file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.form-group .btn-file {
    display: inline-block;
    padding: 10px 16px; 
    font-size: 0.9rem;
    font-weight: 500;
    background-color: var(--color-primary-dark); 
    color: #FFFFFF; 
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    text-align: center;
}

.form-group .btn-file:hover {
    background-color: var(--color-primary); 
    color: var(--color-white);
}

.file-name {
    font-size: 0.9rem;
    color: var(--color-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 8px;
}

.address-group {
    display: flex;
    gap: 10px;
}

.address-group input {
    flex-grow: 1;
}

.btn-address {
    flex-shrink: 0;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.btn-address:hover {
    background-color: var(--color-primary);
}

.register-form #addressMain {
    margin-bottom: 0; 
}

.register-form button[type="submit"] {
    width: 100%;
    font-size: 1.1rem;
    padding: 14px;
    margin-top: 15px;
}

@media (max-width: 767px) {
    .register-form {
        padding: 20px;
    }

    .form-group {
        flex-direction: column; 
        gap: 8px; 
    }

    .form-group label {
        flex: none; 
        padding-top: 0; 
    }

    .file-name {
        padding-top: 0; 
    }
}


/*
 * 19. 회사소개 페이지 (company.html)
 * (파일 하단에 신규 추가)
--------------------------------------*/

/* h1, h2, p 태그가 .section__title 등과 다르므로 스타일 오버라이드 */
.company-page h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-dark);
    margin-bottom: 10px;
}

.company-page h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 25px;
    line-height: 1.4;
}

.company-page .introduce__text p,
.company-page .strength__text p {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 15px;
    line-height: 1.7;
}

/* 하단 법적 고지 섹션 */
.company-legal {
    background-color: var(--color-gray-bg);
}

.company-legal .container {
    max-width: 800px; /* 텍스트 폭 제한 */
}

.company-legal p {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.6;
}

.company-legal p:first-child {
    font-weight: 500;
    color: #555;
    margin-bottom: 10px;
}

/* 회사소개 페이지 반응형 */
@media (min-width: 992px) {
    .company-page h1 {
        font-size: 2.5rem;
    }
    .company-page h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 767px) {
    .company-page h1 {
        font-size: 2.0rem;
    }
    .company-page h2 {
        font-size: 1.2rem;
    }
}

/*
 * 20. 약관 페이지 (conditions_policy.html, privacy_policy.html, refund.html, disclaimer.html)
--------------------------------------*/
.policy-page .section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.policy-section .container {
    max-width: 800px;
}

.policy-page h1 {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-dark);
    text-align: center;
    margin-bottom: 40px;
}

.policy-page h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-border);
}

.policy-page p,
.policy-page li {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 10px;
}

.policy-page p.policy-intro {
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
}

.policy-page ol,
.policy-page ul {
    padding-left: 20px;
    margin-top: 15px;
}

.policy-page ol li,
.policy-page ul li {
    margin-bottom: 10px;
    padding-left: 5px;
}

.policy-page ol ol {
    list-style-type: lower-alpha;
    margin-top: 10px;
}

.policy-page ol ul {
    list-style-type: disc;
    margin-top: 10px;
}

.policy-page strong {
    font-weight: 700;
    color: var(--color-dark);
}

.policy-appendix {
    margin-top: 50px;
    padding: 30px;
    background-color: var(--color-gray-bg);
    border-radius: var(--border-radius);
}

.policy-appendix h2 {
    margin-top: 0;
    border-bottom: none;
    font-size: 1.2rem;
}

.policy-appendix ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.policy-appendix li {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
}
.policy-table th,
.policy-table td {
    border: 1px solid var(--color-border);
    padding: 12px;
    text-align: left;
    line-height: 1.6;
}
.policy-table th {
    background-color: var(--color-gray-bg);
    font-weight: 700;
    color: var(--color-dark);
}
.policy-table td {
    color: var(--color-text-light);
    word-break: keep-all;
}


@media (max-width: 767px) {
    .policy-page h1 {
        font-size: 2.0rem;
    }
    .policy-page h2 {
        font-size: 1.3rem;
    }
    .policy-table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}